<weui-sidebar-container>
  <weui-sidebar [(status)]="_status" [mode]="mode" [position]="position" [backdrop]="backdrop" (openStart)="openStart()"
    (opened)="opened()" (closeStart)="closeStart()" (closed)="closed()">
    <div class="weui-article">
      <p>这是侧边栏内容</p>
      <weui-button weui-type="default" (click)="toggleOpened()">关闭</weui-button>
      <weui-button weui-type="default" closeSidebar>使用指令[closeSidebar]关闭</weui-button>
    </div>
  </weui-sidebar>
  <Page [ngClass]="'sidebar'" [title]="'Sidebar'" [subTitle]="'侧边栏'" [ftBottom]="true">
    <weui-button (click)="toggleOpened()">打开</weui-button>
    <div class="button-sp-area">
      Mode:
      <weui-button weui-mini weui-type="default" (click)="mode = 'over'">Over</weui-button>
      <weui-button weui-mini weui-type="default" (click)="mode = 'slide'">Slide</weui-button>
    </div>
    <div class="button-sp-area">
      Position:
      <weui-button weui-mini weui-type="default" (click)="position = 'left'">Left</weui-button>
      <weui-button weui-mini weui-type="default" (click)="position = 'right'">Right</weui-button>
      <weui-button weui-mini weui-type="default" (click)="position = 'top'">Top</weui-button>
      <weui-button weui-mini weui-type="default" (click)="position = 'bottom'">Bottom</weui-button>
    </div>
    <div class="button-sp-area">
      点击背景关闭:
      <weui-button weui-mini weui-type="default" (click)="backdrop = true">允许</weui-button>
      <weui-button weui-mini weui-type="default" (click)="backdrop = false">禁止</weui-button>
    </div>
  </Page>
</weui-sidebar-container>
